<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="utf-8"/>

        <title>3D Tiles Renderer Metadata Example</title>

		<link rel="stylesheet" href="./styles.css">
        <style>
			#container {
				position: absolute;
				left: 0;
				top: 0;
				pointer-events: none;
				color: white;
				font-family: monospace;
				opacity: 0.75;
				font-size: 12px;
			}

			#cesium-info, #meshFeatures, #structuralMetadata {

				display: inline-block;
				background-color: rgba( 0, 0, 0, 0.5 );
				border-radius: 2px;
				white-space: pre;
				margin: 5px;
				padding: 5px;

			}

			#cesium-info, #cesium-info a {

				white-space: initial;
				color: white;

			}

			#cesium-info a {

				pointer-events: all;

			}

			#meshFeatures:empty, #structuralMetadata:empty {

				display: none;

			}

        </style>
    </head>
    <body>
		<div id="container">
			<div><div id="cesium-info">
				Demonstration of displaying glTF Mesh Features and
				<br/>
				Structural Metadata properties on mouse-over.
				<br/>
				See <a href="https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Core/Ion.js#L6-L7">Cesium repo</a> for demo API key.
			</div></div>
			<div><div id="meshFeatures"></div></div>
			<div><div id="structuralMetadata"></div></div>
		</div>

		<div id="footer">
			<div id="logos">
				<img src="./logos/cesiumion.png" />
			</div>
		</div>
        <script src="./metadata.js" type="module"></script>
    </body>
</html>
